<template>
	<view class="content">
		<view style="width: 100vw;background-color: #fff;position: fixed;top: 0;left: 0;">
			<u-tabs :list="tabs" @click="click" lineColor="#CE3026" lineWidth="92" :activeStyle="{ color: '#CE3026'}"  :scrollable="false"></u-tabs>
		</view>
		<view v-if="type=='产品'" class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<img :src="baseUrl + item.image" alt="" mode="widthFix" class="item_img">
				<view class="item_title">
					{{item.name}}
				</view>
			</view>
		</view>
		<view v-if="type=='文章'">
			<view class="item_info2" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<view class="item_info2_img">
					<img :src="baseUrl + item.image" alt="" mode="widthFix">
				</view>
				<view class="right">
					<view class="item_info2_title">
						{{item.name}}
					</view>
					<view class="item_info2_subtitle u-line-2">
						{{item.subtitle}}
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;">
			<u-loadmore :status="status" :loading-text="loadingText"  :loadmore-text="loadmoreText"  :nomore-text="nomoreText"/>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/api/request.js'
	import {collectlist,looklist} from '@/api/api.js'
	export default {
		data() {
			return {
				list:[],
				page: 0,
				size:10,
				total:0,
				status:'loadmore',
				loadingText: '正在拼命加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有更多了~',
				pageType:'',
				type:'产品',
				tabs:[{name:'商品'},{name:'文章'}],
				baseUrl
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.title
			})
			this.pageType=options.type
			this.getRecord()
		},
		onReachBottom(){
			this.getRecord()
		},
		methods: {
			click(item){
				this.type = item.name =='商品' ? '产品' : item.name
				this.page = 0
				this.list = []
				this.status = 'loading'
				this.getRecord()
			},
			getRecord(){
				if(this.status == 'nomore'){
					return
				}
				this.page++
				this.status = 'loading'
				if(this.pageType == '1'){
					looklist({page:this.page,type:this.type}).then(res=>{
						this.list.push(...res.data.data)
						this.total = res.data.total
						if(this.total <= this.list.length){
							this.status = 'nomore'
						}else {
							this.status = 'loadmore'
						}
					})
				}else {
					collectlist({page:this.page,type:this.type}).then(res=>{
						this.list.push(...res.data.data)
						this.total = res.data.total
						if(this.total <= this.list.length){
							this.status = 'nomore'
						}else {
							this.status = 'loadmore'
						}
					})
				}
			},
			toDetail(item){
				uni.navigateTo({
					url:'/pages/product/detail?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 110rpx;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 0 32rpx;
	}
	.item {
		flex: 1;
		min-width: 34%;
		max-width: calc(50% - 10rpx);
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&_img {
			width: 100%;
			border-radius: 8rpx;
		}
		&_title {
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			padding: 12rpx 0 22rpx;
		}
	}
	.item_info2 {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		&_img {
			width: 184rpx;
			height: 184rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 16rpx;
			img {
				width: 184rpx;
			}
		}
		&_title {
			font-size: 28rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 33rpx;
		}
		&_subtitle {
			margin-top: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}
	}

</style>
